const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // 入口 
  entry: {
    app: './src/main.js'  // 入口js
  },
  // 出口
  output: {
    path: path.resolve('dist'),
    filename: '[name].[contenthash:8].js',  // 文件名hash化, 有效利用浏览器缓存
    clean: true, // 自动清除打包文件 
  },

  // 模块加载器
  module: {
    rules: [
      // css
      {
        test: /\.css$/,
        use: [ // 从下向上执行
          'vue-style-loader', // 将js中loader运行时加载到页面的<style>
          'css-loader' // 将css加载到js中
        ]
      },

      // less
      {
        test: /\.less$/,
        use: [
          // compiles Less to CSS
          'vue-style-loader',
          'css-loader',
          'less-loader', // less转为css
        ],
      },
      // es6=>es5
      {
        test: /\.js$/,
        exclude: /node_modules/,
        // use: 'babel-loader',
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // vue
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },

  // 插件
  plugins: [
    // 打包HTML: 以public/index.html为模板生成一个自动引入了打包的js文件的dist/index.html
    new HtmlWebpackPlugin({
      template: path.resolve('./public/index.html')
    }),
    new VueLoaderPlugin()
  ],

  // 模式
  mode: 'development',
  // mode: 'production',

  // 开发服务器
  devServer: {
    port: 3000, // 端口
    open: true, // 自动打开浏览器
  }

}